<script setup lang="ts">

import {message} from "ant-design-vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {SycmBrandMonitor} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import {SycmItemMonitor} from "~/contentScripts/views/sycm/item_monitor/SycmItemMonitor";
import {Shop, ShopLists, SycmShopAnalysisSale} from "~/contentScripts/views/sycm/shop_analysis/SycmShopAnalysisSale";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const shopLists = ref<ShopLists>();
const dates = ref<Array<String>>([]);
const columns = ref<Array<any>>([]);
const dataSource = ref<Array<any>>([]);

const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'cateRankId.value',
      title: '排名',
      width: 60,
      fixed: 'left',
      sorter: (a: any, b: any) => parseFloat(a.cateRankId?.value||999999999) - parseFloat(b.cateRankId?.value||999999999),
    },
    {
      dataIndex: 'brandModel.brandName',
      title: '品牌名称',
      // width: 300,
      dataType: 'brand',
      // fixed: 'left',
      sorter: (a: any, b: any) => a.brandModel.brandName.localeCompare(b.brandModel.brandName),
      dataField: {
        brand_logo: 'brandModel.logo',
        brand_name: 'brandModel.brandName',
      }
    },
    {
      dataIndex: 'tradeIndex.value',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex.value - b.tradeIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (typeof record.tradeIndex.value === 'undefined' || record.tradeIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.tradeIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.tradeIndex.value, 0, false);
      }
    }
  ];
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    loading.value = true;
    const data = await SycmBrandMonitor.getMonitorLists();
    if (!data) {
      message.error('获取监控品牌失败,请重试!');
      loading.value = false;
      return;
    }
    console.log(data);
    dataSource.value = data.data;
    calcColumns();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
}, {deep: true});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞争品牌-监控品牌-竞品列表`" width="1200px" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: calc(100vh - 110px);overflow-y: auto;">
        <base-table table-name="竞争-竞争品牌-监控品牌-品牌列表" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
        // x: 2300,
        y:740
      }"
        >
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
